import { StatusBar } from 'expo-status-bar';
import { 
    Alert,
    StyleSheet, 
    Text, 
    View, 
    Image,
    ImageBackground,
    ScrollView,
    Button,
    TouchableOpacity
} from 'react-native';
import { useState, useEffect } from 'react';
// const T = ({children,style})=>{
//     return <Text style={style}>{children}</Text>
// }
const T = ({children,...rest})=>{
    return <Text {...rest}>{children}</Text>
}
const ImageBG = ({style,source,children})=>{
    return <View style={style}>
        <Image 
            source={source}
            style={[style,{position: 'absolute'}]}
        />
        {children}
    </View>

}
const uri = 'https://facebook.github.io/react-native/img/tiny_logo.png'

const B = ({children,style,color,...rest})=>{
    return (
        <TouchableOpacity 
            {...rest}
            style={[
                {
                    justifyContent: 'center',
                    alignItems: 'center',
                    borderRadius: 10
                },
                style
            ]}
        >
            <Text style={{color: color?color:'#fff'}}>{children}</Text>
        </TouchableOpacity>
    )
}
const tagsData = [
    { label: '综合新闻', id: '' },
    { label: '新闻2', id: '2' },
    { label: '新闻3', id: '3' },
    { label: '新闻4', id: '4' },
    { label: '新闻5', id: '5' },
]
export default function App() {
    const [selectTab,setSelectTab] = useState("");
    const onPress = ()=>{
        Alert.alert(
            'title',
            "massage",
            [
                {
                  text: "Ask me later",
                  onPress: () => console.log("Ask me later pressed")
                },
                {
                  text: "取消",
                  onPress: () => console.log("Cancel Pressed"),
                  style: "cancel"
                },
                { text: "确定", onPress: () => console.log("OK Pressed") }
              ]
        )
    }
    return (
        <View style={styles.layout}>
            <ScrollView>
                <B
                    onPress={onPress}
                    style={{
                        width: 200,
                        height: 50,
                        backgroundColor: '#aaa',
                        borderRadius: 25
                    }}
                    color='#f00'
                >综合新闻</B>
                <View style={styles.tabBtn}>
                    {
                        tagsData.map(tag=>(
                            <B
                                key={tag.id}
                                onPress={()=>setSelectTab(tag.id)}
                                style={{
                                    width: "18%",
                                    height: 30,
                                    backgroundColor: selectTab==tag.id?"#f00":'#aaa'
                                }}
                            >{tag.label}</B>
                        ))
                    }
                </View>
                <Text>hello</Text>
            </ScrollView>
        </View>
    );
}

const styles = StyleSheet.create({
    tabBtn: {
        flexDirection: 'row',
        justifyContent: 'space-around',
        marginVertical: 20
    },
    layout: {
        paddingTop: 30,
        flex: 1,
        backgroundColor: '#ccc'
    },
});
